<template>
<div>
  <Modal fullscreen v-model="scopeModal" title="绘画范围" @on-ok="saveScope">
    <div v-if="scopeModal" class="amap-page-container">
      <el-amap vid="amap3" class="amap-demo" :zoom="zoom" :center="center">
        <el-amap-marker vid="index_center" :position="center"></el-amap-marker>
        <el-amap-polygon v-for="(polygon1, index1) in polygons" :key="index1+'1'" :vid="polygon1+''+index1"
                         :path="polygon1.path" :fillColor="polygon1.fillColor" :bubble="polygon1.bubble"
                         :fillOpacity="polygon1.fillOpacity"></el-amap-polygon>
        <el-amap-polygon v-for="(polygon2, index2) in polygonsList" :key="index2+'2'" :vid="polygon2+''+index2"
                         :path="polygon2.path" :fillColor="polygon2.fillColor" :bubble="polygon2.bubble"
                         :fillOpacity="polygon2.fillOpacity"></el-amap-polygon>
      </el-amap>
    </div>
  </Modal>
</div>
</template>

<script>
import { disposeCompanyScope, findCompanyScopeList, getCompanyInfo } from '../../../../api/eventlist'

export default {
  name: 'scope',
  props: {
    severUserInfo: Object
  },
  data () {
    // let self = this
    return {
      scopeModal: false,
      polygons: [
        {
          bubble: true,
          editable: true,
          fillOpacity: '0.2',
          fillColor: '#f77777',
          path: []
        }
      ],
      zoom: 13, // 缩放
      center: [123.412581, 41.805853],
      polygonsList: []
    }
  },
  methods: {
    init () {
      this.getCompanyInfo()
      this.findCompanyScopeList()
    },
    getCompanyInfo () {
      getCompanyInfo().then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          console.log(result)
          if (result.csc_mapjson !== undefined || result.csc_mapjson !== '') {
            this.center = []
            this.center.push(result.csc_mapjson.split(',')[0])
            this.center.push(result.csc_mapjson.split(',')[1])
          }
          this.disposeScope(ret.data.data)
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    saveScope () {
      if (this.severUserInfo.company_grade === '4') {
        let newpath = []
        this.polygons[0].path.forEach(item => {
          let lng = item.lng
          let lat = item.lat
          let point = [lng, lat]
          newpath.push(point)
        })
        let data = {
          id: this.severUserInfo.company_id,
          company_scope: JSON.stringify(newpath)
        }
        console.log(data)
        disposeCompanyScope(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          } else {
            this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
          }
        })
      }
    },
    findCompanyScopeList () {
      findCompanyScopeList().then(ret => {
        if (ret.data.errcode === 0) {
          if (ret.data.data.length > 0) {
            let result = ret.data.data
            result.forEach(item => {
              if (item.code === 'LM00007') {
                let data = item.company_scope.split('-')
                data.forEach(item1 => {
                  this.polygonsList.push(this.dispose(item1))
                })
              } else {
                this.polygonsList.push(this.dispose(item.company_scope))
              }
            })
          }
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    disposeScope (e) {
      if (e.company_scope === undefined || e.company_scope === '') {
        if (e.csc_mapjson === undefined || e.csc_mapjson === '') {
          this.$Notice.error({ title: '查询失败', desc: '请选选择中心点！' })
        } else {
          this.autoPolygon()
          this.scopeModal = true
        }
      } else {
        if (e.code === 'LM00007') {
          let data = e.company_scope.split('-')
          console.log(data)
          data.forEach(item => {
            this.polygons.push(this.dispose(item))
          })
        } else {
          this.polygons[0].path = JSON.parse(e.company_scope)
        }
        this.scopeModal = true
      }
    },
    autoPolygon () {
      let lng = parseFloat(this.center[0])
      let lat = parseFloat(this.center[1])
      let center = [lng, lat]
      let lng1 = lng + 0.03
      let lat1 = lat
      let center1 = [lng1, lat1]
      let lng2 = lng + 0.03
      let lat2 = lat + 0.03
      let center2 = [lng2, lat2]
      let lng3 = lng
      let lat3 = lat + 0.03
      let center3 = [lng3, lat3]
      this.polygons[0].path = []
      this.polygons[0].path.push(center)
      this.polygons[0].path.push(center1)
      this.polygons[0].path.push(center2)
      this.polygons[0].path.push(center3)
    },
    dispose (e) {
      try {
        let data = {
          bubble: true,
          fillColor: '#f77777',
          fillOpacity: '0.2',
          path: JSON.parse(e)
        }
        // this.polygons.push(data)
        // this.polygons[0].path.push()
        return data
      } catch (e) {
        this.$Notice.error({
          title: '获取失败',
          desc: '数据格式不正确，重新选择'
        })
      }
    }
  }
}
</script>

<style scoped>
.card>>>.ivu-card-body{
  padding: 0;
}
.amap-demo {
  height: 600px;
}
/*// 表格滚动条*/
.ivu-table-overflowX {
  overflow-x: hidden;
}

/*// 模态框*/
.item1 {
  height: 42px;
  line-height: 40px;
}

/*// 地图*/
.amap-page-container {
  position: relative;
  width: 100%;
  height: 88%;
}

/*// 地图选点预览工具栏*/
.toolbar {
  display: block;
  text-align: center;
  height: 20px;
  margin-top: 50px;
}
.ml10 {
  margin-left: 10px;
}

.buttonGroupB{
  margin-right: 5px;
}

.hu_input {
  width: 40px;
  margin-right: 5px;
}
</style>
